<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/pages/successfulCases.css">
    <link rel="stylesheet" type="text/css" href="../css/public.css">
    <link rel="stylesheet" type="text/css" href="../swiper/swiper.min.css">
    <script src="../js/reset.js"></script>
    <title></title>

    <style>
        .swiper-container {
            width: 100%;
            height: 300px;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
            background-size: cover;
            background-position: center;
        }

        .gallery-top {
            height: 80%;
            width: 100%;
        }

        .gallery-thumbs {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0;
        }

        .gallery-thumbs .swiper-slide {
            height: 100%;
            opacity: 0.4;
        }

        .gallery-thumbs .swiper-slide-active {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div style="font-size: 12px;" class="logo">
                <a href="../index.html"><img src="../img/images/LOGO.png" alt=""></a>
            </div>
            <div class="meun">
                <div class="more"></div>
                <span>成功案例</span>
            </div>
            <div class="meun-bar">
                <div class="head">
                    <div style="font-size: 12px;" class="logo">
                        <img src="../img/images/LOGO.png" alt="">
                    </div>
                    <div class="inner-meun close">
                        <div class="more close"></div>
                        <span>成功案例</span>
                    </div>
                </div>
                <ul class="yiji">
                    <li>
                        <a href="../index.html">首页</a>
                    </li>
                    <li>
                        <a href="celebrity.html">洋葱抖音名人</a>
                    </li>
                    <li>
                        <!--newsInformation.html-->
                        <a href="#" class="inactive">新闻资讯</a>
                        <ul style="display: none">
                            <li class="last">
                                <a href="#">123</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <!--newsInformation.html-->
                        <a href="#" class="inactive">洋葱抖音</a>
                        <ul style="display: none">
                            <li class="last">
                                <a href="#">123</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="introduction.html">联系我们</a>
                    </li>
                    <li>
                        <!--newsInformation.html-->
                        <a href="#" class="inactive">洋葱服务</a>
                        <ul style="display: none">
                            <li class="last">
                                <a href="#">123123</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!--<ul>
                    <li>
                        <a href="successfulCases.html">成功案例</a>
                    </li>
                    <li>
                        <a href="introduction.html">公司介绍</a>
                    </li>
                    <li>
                        <a href="joinUs.html">加入我们</a>
                    </li>
                    <li>
                        <a href="informationPlatform.html">平台资讯</a>
                    </li>
                    <li>
                        <a href="../index.html">首页</a>
                    </li>
                    <li>
                        <a href="newsInformation.html">新闻资讯</a>
                    </li>
                    <li>
                        <a href="onionTrill.html">洋葱抖音</a>
                    </li>
                    <li>
                        <a href="onionService.html">洋葱服务</a>
                    </li>
                    <li>
                        <a href="onionThink-tank.html">洋葱智库</a>
                    </li>
                    <li>
                        <a href="businessIntroduction.html">业务介绍</a>
                    </li>
                </ul>-->
            </div>
        </header>
        <div class="content">
            <div class="banner">
                <div class="swiper-banner-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="../img/images/洋葱抖音.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!--tab切换-->
            <div class="tab">
                <p>
                    <span>
                        <a href="onionTrill.html">洋葱活动</a>
                    </span>
                    <span class="active"><a href="successfulCases.html">成功案例</a></span>
                </p>
            </div>
            <div style="height: 20px; width: 100%; background: #ddd;"></div>
            <!--成功案例内容-->
            <div class="content">
                <div class="inner-cont">
                    <div class="title">
                        <div class="name">韩后达人面膜</div>
                        <p class="tip">视频合作</p>
                    </div>
                    <div class="imageTab">
                        <!-- Swiper -->
                        <div class="swiper-container gallery-top">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10/)"></div>
                            </div>
                        </div>
                        <div class="swiper-container gallery-thumbs">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9/)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10/)"></div>
                            </div>
                        </div>

                    </div>
                    <div class="disdata">
                        <p class="name">效果：</p>
                        <p class="cont">啊沙发斯蒂芬斯蒂芬客户反馈违法我和付款后渴望和付款后气温凤凰网科技而合肥科技文化副科级维护费可划分空间</p>
                    </div>
                    <div class="btn">
                        <div>上一页：
                            <span>达人面膜</span>
                        </div>
                        <div>下一页：
                            <span>哈利路亚</span>
                        </div>
                    </div>
                </div>
            </div>
            <footer>
                <div class="footer">

                </div>
            </footer>
        </div>
        <script src="../js/jquery-3.3.1.min.js"></script>
</body>

<script src="../swiper/swiper.min.js"></script>
<script>
    $(function () {
        $('.meun-bar').hide();
        $('.meun').on('touchstart', function () {
            console.log(123);
            $('.meun-bar').show();
        })
        $(document).click(function (e) {
            var target = $(e.target);
            if (target.closest(".meun").length != 0) return;
            $(".meun-bar").hide();

        });
    });
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        loop: true,
        loopedSlides: 5, //looped slides should be the same
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 4,
        touchRatio: 0.2,
        loop: true,
        loopedSlides: 5, //looped slides should be the same
        slideToClickedSlide: true,
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;
</script>


</html>
